<template>
  <div id="echarts1"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts1()
  },
  created() {},
  methods: {
    showEcharts1() {
      let myChart = this.$echarts.init(document.getElementById('echarts1'))
      const xData = this.data
      let centerValue = ['50%', '45%'],
        nameList = xData.map((v) => v.name),
        sum = 0
      let data1 = []
      // 根据总值设置间隔值大小
      xData.forEach((item) => {
        sum += Number(item.value)
      })
      // 给每个数据后添加特定的透明的数据形成间隔
      xData.forEach((item, index) => {
        if (item.value !== 0) {
          data1.push(item, {
            name: '',
            value: Number(sum / 120),
            labelLine: {
              show: false,
              lineStyle: {
                color: 'transparent',
              },
            },
            itemStyle: {
              color: 'transparent',
            },
          })
        }
      })

      function Pie() {
        let dataArr = []
        for (var i = 0; i < 150; i++) {
          if (i % 3 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 10,
              itemStyle: {
                normal: {
                  color: '#fff',
                  borderWidth: 0,
                  borderColor: 'rgba(0,0,0,0)',
                },
              },
            })
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)',
                  borderWidth: 0,
                  borderColor: 'rgba(0,0,0,0)',
                },
              },
            })
          }
        }
        return dataArr
      }
      let option = {
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b} : {d}% <br/> {c}',
        // },
        // legend: {
        //   orient: 'horizontal',
        //   icon: 'circle',
        //   bottom: 10,
        //   x: 'center',
        //   textStyle: {
        //     color: '#fff',
        //   },
        //   data: nameList,
        //   formatter: function (name) {
        //     let obj = xData.find((v) => v.name == name)
        //     let bfb = ((Number(obj.value) / sum) * 100).toFixed()
        //     return `${name} ${obj.value} 占比: ${bfb}%`
        //   },
        // },
        series: [
          // 数据的圆环
          {
            type: 'pie',
            radius: ['45%', '65%'],
            center: centerValue,
            color: ['#00FFFF', '#FF8352'],
            itemStyle: {
              borderRadius: 2,
              shadowBlur: 5,
              // borderColor: 'rgba(0,0,0,0)',
              // borderWidth: 10,
            },
            data: xData,
            labelLine: {
              show: true,
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function (param) {
                console.log('param', param)
                return [`{a|${param.name}}` + '\n' + `{b|${param.percent}%}` + '\n' + `{c|${param.value}}`]
              },
              rich: {
                a: {
                  fontSize: 14,
                  color: '#fff',
                },
                b: {
                  fontSize: 14,
                  color: '#fff',
                  padding: [5, 0, 0, 0],
                },
                c: {
                  fontSize: 14,
                  color: '#fff',
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 10,
              lineStyle: {
                width: 2,
              },
            },
          },
          // 最里面两个
          {
            type: 'pie',
            radius: ['17%', '19%'],
            center: centerValue,
            hoverAnimation: false,
            color: ['#ffffff', 'red'],
            startAngle: 105,
            data: [
              {
                value: 30,
                name: '',
                itemStyle: {
                  normal: {
                    color: 'transparent',
                  },
                },
              },
              {
                value: 5,
                name: '',
                itemStyle: {
                  normal: {
                    color: 'transparent',
                  },
                },
              },
              {
                value: 65,
                name: 'ddd',
                itemStyle: {
                  normal: {
                    color: '#ffffff',
                  },
                },
              },
            ],
            labelLine: {
              normal: {
                show: false,
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
          },
          // 最里面两个
          {
            type: 'pie',
            radius: [0, '21%'],
            center: centerValue,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: 25,
                name: '1',
                itemStyle: {
                  normal: {
                    color: 'transparent',
                    borderWidth: 4,
                    borderColor: '#ffffff',
                  },
                },
              },

              {
                value: 75,
                name: '2',
                itemStyle: {
                  normal: {
                    color: 'transparent',
                  },
                },
              },
            ],
            selectedOffset: 10,

            labelLine: {
              normal: {
                show: false,
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
          },
          {
            // 最外圈 三个线条
            type: 'pie',
            radius: ['72%', '74%'],
            center: centerValue,
            hoverAnimation: false,
            color: ['blue', 'transparent', 'blue', 'transparent', 'blue', 'transparent'],
            data: [
              {
                value: 25,
                name: '',
              },
              {
                value: 17,
                name: '',
              },
              {
                value: 25,
                name: '',
              },
              {
                value: 17,
                name: '',
              },
              {
                value: 25,
                name: '',
              },
              {
                value: 17,
                name: '',
              },
            ],
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
          // 虚线 圆圈
          {
            type: 'pie',
            zlevel: 0,
            silent: true,
            radius: ['34%', '35%'],
            center: centerValue,
            z: 10,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: Pie(),
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
